<script setup lang="ts">
import { provide, ref } from "vue";
import BarLeft from "../components/BarLeft.vue";
import BarTop from "../components/BarTop.vue";
import ImagePreview from "../components/ImagePreview.vue";

const imagePreviewRef = ref<any>(null);
provide("imagePreviewRef", imagePreviewRef);
const handleClickImage: any = (e: { target: HTMLElement; }) => {
  const target = e.target as HTMLElement;
  if (target.tagName === "IMG") {
    const imgUrl = target.getAttribute("src") || "";
    imagePreviewRef.value.open(imgUrl);
  }
}
const bindClickImageShow = () => {
  setTimeout(() => {
    document.querySelector(".editor-content-view") &&
      (
        document.querySelector(".editor-content-view") as HTMLElement
      ).addEventListener("click", handleClickImage);
  })
};


provide("bindClickImageShow", bindClickImageShow)

</script>

<template>
  <BarTop />
  <div class="appBox">
    <BarLeft />
    <div class="pageBox">
      <router-view v-slot="{ Component }">
        <keep-alive>
          <component :is="Component" />
        </keep-alive>
      </router-view>
      <ImagePreview ref="imagePreviewRef" />
    </div>
  </div>

</template>

<style>
.appBox {
  flex: 1;
  display: flex;
  flex-direction: row;
  height: calc(100% - 40px);
  overflow-y: hidden;
  background-color: var(--background-color);
  border-top-left-radius: var(--border-radius);
}

.pageBox {
  flex: 1;
  min-width: 0;
  padding: 16px;
  background-color: var(--background-color);
}

/* 预览模态框的样式 */
.image-preview-modal {
  z-index: 5000 !important;
  /* 确保高于编辑器的 z-index */
}

.ant-image-preview-root .ant-image-preview-wrap {
  z-index: 6000 !important;
}

/* 添加过渡动画 */
.pageBox > div {
  transition: opacity 0.3s ease;
}

/* 天蓝色主题的滚动条 */
.pageBox::-webkit-scrollbar {
  width: 4px;
  height: 4px;
}

.pageBox::-webkit-scrollbar-track {
  background: transparent;
}

.pageBox::-webkit-scrollbar-thumb {
  background: var(--border-color);
  border-radius: 2px;
}

.pageBox::-webkit-scrollbar-thumb:hover {
  background: var(--primary-color);
}
</style>